site_8g/src/app/[locale]/(navbar)/cashWheel/CashWheelClient.tsx

"use client";

import Box from "@/components/Box";
import { Link } from "@/i18n/routing";
import { useUserInfoStore } from "@/stores/useUserInfoStore";
import { copyText } from "@/utils/methods";
import { LuckyWheel } from "@lucky-canvas/react";
import { useCountDown } from "ahooks";
import { Popup, Toast } from "antd-mobile";
import clsx from "clsx";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { useRef, useState } from "react";
import LotteryWheel from "./LotteryWheel";
import styles from "./style.module.scss";
const CashMainCom = () => {
    return (
        <div className={`${styles.cashMain} ${styles.cashMain} ${styles.type1}`}>
            <div className={styles.haveCash}>
                <img src="/wheel/cash.png" alt="" className={styles.cashImg} />
                <div>
                    {" "}
                    R$ <span className={styles.cash}>94.15</span>
                </div>
                <span className={styles.withdraw}>
                    <img src="/wheel/pix.png" alt="" /> SACAR{" "}
                </span>
            </div>
            <div className={styles.progress}>
                <div className={styles.num}> 94.15%</div>
                <div className={styles.bar}>
                    <span style={{ width: "calc(97.15% - 0.07rem)" }}></span>
                </div>
            </div>
            <div className={styles.needCash}>
                {" "}
                Ainda e necessário <span className={styles.needCashNum}>5.85</span> para realizar do
                saque{" "}
            </div>
        </div>
    );
};
const DrawMain1 = () => {
    return (
        <div className={styles.drawMain}>
            <div className={styles.draw}>
                {/*<img src="/wheel/d.png" className={styles.lamp} />*/}
                {/*<img src="/wheel/light1.png" className={styles.light1} />*/}
                {/*<img src="/wheel/light2.png" className={styles.light2} />*/}
                {/*<div className={styles.pointer}>*/}
                {/*    <img src="/wheel/pointer.png" />*/}
                {/*</div>*/}
                {/*<img src="/wheel/bg_light.png" className={styles.drawBgImg} />*/}
                {/*<div className={`${styles.drawLen} ${styles.position} `}></div>*/}

                {/* <div className={styles.drawContents}>
          <canvas id={styles.draw} width={306} height={306} />
        </div> */}
                <LotteryWheel />
            </div>
        </div>
    );
};
const DrawContent = () => {
    return (
        <div className={styles.drawContent}>
            <div className={styles.text}>
                <span>
                    <span style={{ color: "rgb(135, 149, 177)" }}>Expira em</span> 2d 19:18:13
                </span>
            </div>
            <div className={styles.cashButton}>
                <div> Convide amigos para ajudar com saques</div>
                <div className={`${styles.iconfont} ${styles.iconShare}`}></div>
            </div>
        </div>
    );
};
type Dtltype = "left" | "right";
const LeftListClient = () => {
    const winListData = Array(500).fill("1");
    return (
        <>
            {winListData.length > 0 &&
                winListData.map((item, index) => {
                    return (
                        <div className={styles.item} key={index}>
                            <span className={`${styles.name} ${styles.omitWrap}`}>
                                5533******412
                            </span>
                            <span className={styles.tipText}> Acabou de saca </span>
                            <div className={styles.value}>
                                <span className={styles.addCash}>+100</span>
                                <span className={styles.unit}> R$</span>
                            </div>
                        </div>
                    );
                })}
        </>
    );
};
const Report = () => {
    const [activeTab, setActiveTab] = useState<Dtltype>("left");

    const handler = (dtl: Dtltype) => {
        setActiveTab(dtl);
    };
    const activeClass = clsx(
        styles.vanTabItem,
        activeTab === "left" ? styles.vanTabAcriveLeft : styles.vanTabAcriveRight
    );

    return (
        <div className={styles.report}>
            <div className={`${styles.vanTabs} ${styles.vanTabsLine}`}>
                <div className={styles.vanTabsWrap}>
                    <div className={styles.vanTabsNav}>
                        <div
                            className={`${styles.vanTabItem} ${activeTab === "right" ? styles.vanTabAcriveRight : ""} `}
                            onClick={() => handler("left")}
                        >
                            <span className={activeTab === "left" ? styles.activeText : ""}>
                                Relatório
                            </span>
                        </div>
                        <div
                            className={`${styles.vanTabItem} ${activeTab === "left" ? styles.vanTabAcriveLeft : ""}`}
                            onClick={() => handler("right")}
                        >
                            <span className={activeTab === "right" ? styles.activeText : ""}>
                                Minha Referencia
                            </span>
                        </div>
                    </div>
                </div>
                <div className={styles.vanTabsContent}>
                    <div className={styles.vantabpane}>
                        <div className={styles.tabContent}>
                            <div
                                className={`${styles.winList} ${styles.swipernoswiping} ${styles.type2}`}
                            >
                                {activeTab === "left" ? <LeftListClient /> : null}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className={styles.rules}>
                <h2>Regras</h2>
                <ul className={styles.tipsContent}>
                    <li>1.Você pode iniciar um saque quando o valor acumulado atingir 100 BRL. </li>
                    <li>
                        2.Convidar amigos para se registrarem no 9f.com irá ajudá- lo a sacar
                        dinheiro rapidamente.
                    </li>
                    <li>3. Cada usuário receberá uma única rodada grátis por dia. </li>
                    <li>
                        4.Cada usuário tem um período de validade de 3 dias para cada atividade e
                        pode participar da atividade várias vezes.
                    </li>
                    <li>
                        5.Se você receber um bônus de dinheiro extra, pode jogar jogos de graça e
                        ganhar ainda mais dinheiro real.
                    </li>
                    <li>6.Se voce nao retirar o dinheiro dentro de 3 dias,ele ser perdido.</li>
                </ul>
            </div>
        </div>
    );
};
const WheelWallet = () => {
    const user = useUserInfoStore((state) => state.userInfo);
    return (
        <Box className={"absolute top-0 w-[100%]"}>
            <div
                style={{
                    background: "url(/wheels/wheel-wallet.png)",
                    backgroundSize: "100% 100%",
                }}
                className={"relative h-[1.4583rem] w-[100%] p-[0.1389rem]"}
            >
                <div className={"mb-[10px] text-[#49c25a]"}>
                    <span className={"iconfont icon-yonghu"}></span>
                    <span>Conta</span>
                    <span>{user.user_phone}</span>
                </div>
                <div className={"text-[0.3472rem] font-bold text-[#008213]"}>
                    R$
                    <span>111</span>
                </div>
                <div className={"mt-[0.2083rem] w-[100%] text-center text-[18px]"}>
                    <span className={"mr-[10px] text-[#008213]"}>Faltam para O saque</span>
                    <span className={"text-[yellow]"}>R$9.36</span>
                </div>
            </div>
        </Box>
    );
};
const DrawMain = () => {
    const myLucky = useRef<any>();
    const desktopWheelRef = useRef<any>();
    const [blocks] = useState([
        {
            padding: "0",
            imgs: [
                {
                    src: "/wheels/wheel.png",
                    width: "100%",
                    height: "100%",
                },
            ],
        },
    ]);
    const [prizes] = useState([
        { fonts: [{ text: "0", top: "20%" }] },
        { fonts: [{ text: "1", top: "20%" }] },
        { fonts: [{ text: "2", top: "20%" }] },
        { fonts: [{ text: "3", top: "20%" }] },
        { fonts: [{ text: "4", top: "20%" }] },
        { fonts: [{ text: "5", top: "20%" }] },
        { fonts: [{ text: "6", top: "20%" }] },
        { fonts: [{ text: "7", top: "20%" }] },
    ]);
    const [buttons] = useState([
        {
            radius: "30%",
            imgs: [
                {
                    src: "/wheels/pointer.png",
                    width: "100%",
                    top: "-130%",
                },
            ],
        },
    ]);

    const [defaultConfig] = useState({
        offsetDegree: 20,
    });
    return (
        <div className={"relative"}>
            <WheelWallet />

            <div className={"relative hidden w-[100%] pt-[20px] sm:block"}>
                <img src={"/wheels/wheel-bg.png"} className={"w-[100%]"} />
                <img
                    src={"/wheels/title.png"}
                    className={"absolute left-[13%] top-[53%] z-10 w-[70%] object-cover"}
                />
                {/*定位到中心圆*/}
                <div className={"absolute bottom-[0.0347rem] h-[2.6736rem] w-[100%]"}>
                    <div className={"flex h-[100%] w-[100%] justify-center text-center"}>
                        {/* 图片切换动画 */}
                        <img
                            src="/wheels/light-1.png"
                            alt=""
                            className={"mr-[0.0556rem] h-[100%]"}
                        />

                        <div
                            className={
                                "mr-[0.07rem] flex h-[2.35rem] w-[2.35rem] " +
                                " absolute" +
                                " bottom-[0.17rem] z-50 rounded-[50%]"
                            }
                        >
                            {/*<div*/}
                            {/*    className={*/}
                            {/*        "absolute h-[100%] w-[100%] rounded-[50%] " +*/}
                            {/*        " z-50 border-[red]" +*/}
                            {/*        ""*/}
                            {/*    }*/}
                            {/*    style={{*/}
                            {/*        boxShadow: "rgba(255, 255, 255, 1) 0px 0px 60px 12px inset",*/}
                            {/*    }}*/}
                            {/*>*/}
                            {/*</div>*/}

                            <LuckyWheel
                                ref={myLucky}
                                width="2.35rem"
                                height="2.35rem"
                                blocks={blocks}
                                defaultConfig={defaultConfig}
                                prizes={prizes}
                                buttons={buttons}
                                onStart={() => {
                                    // 点击抽奖按钮会触发star回调
                                    myLucky.current?.play();
                                    setTimeout(() => {
                                        const index = (Math.random() * 6) >> 0;
                                        myLucky.current?.stop(index);
                                    }, 2500);
                                }}
                                onEnd={(prize: any) => {
                                    // 抽奖结束会触发end回调
                                    alert("恭喜你抽到 " + prize.fonts[0].text + " 号奖品");
                                }}
                            />
                        </div>
                    </div>
                </div>
            </div>

            <div className={"relative block w-[100%] pt-[20px] sm:hidden"}>
                <img src={"/wheels/wheel-bg.png"} className={"w-[100%]"} />
                <img
                    src={"/wheels/title.png"}
                    className={"absolute left-[13%] top-[53%] z-10 w-[70%] object-cover"}
                />
                {/*定位到中心圆*/}
                <div className={"absolute bottom-[0.0347rem]" + " h-[2.5rem]" + " w-[100%]"}>
                    <div className={"flex h-[100%] w-[100%] justify-center text-center"}>
                        {/* 图片切换动画 */}
                        <img
                            src="/wheels/light-1.png"
                            alt=""
                            className={"mr-[0.0556rem] h-[100%]"}
                        />

                        <div
                            className={
                                "-mr-[0.05rem] flex h-[2.3rem] w-[2.3rem] " +
                                " absolute" +
                                " bottom-[0.045rem]"
                            }
                        >
                            {/*<div*/}
                            {/*    className={*/}
                            {/*        "absolute h-[100%] w-[100%] rounded-[50%] " +*/}
                            {/*        " z-50 border-[red]" +*/}
                            {/*        ""*/}
                            {/*    }*/}
                            {/*    style={{*/}
                            {/*        boxShadow: "rgba(255, 255, 255, 1) 0px 0px 60px 12px inset",*/}
                            {/*    }}*/}
                            {/*>*/}
                            {/*</div>*/}

                            <LuckyWheel
                                ref={desktopWheelRef}
                                width="2.2rem"
                                height="2.2rem"
                                blocks={blocks}
                                defaultConfig={defaultConfig}
                                prizes={prizes}
                                buttons={buttons}
                                onStart={() => {
                                    // 点击抽奖按钮会触发star回调
                                    desktopWheelRef.current?.play();
                                    setTimeout(() => {
                                        const index = (Math.random() * 6) >> 0;
                                        desktopWheelRef.current?.stop(index);
                                    }, 2500);
                                }}
                                onEnd={(prize: any) => {
                                    // 抽奖结束会触发end回调
                                    alert("恭喜你抽到 " + prize.fonts[0].text + " 号奖品");
                                }}
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};
const CountdownClient = () => {
    const [_, formattedRes] = useCountDown({
        leftTime: 60 * 100000,
    });
    const { days, hours, minutes, seconds } = formattedRes;
    return (
        <div className={"relative flex justify-center"}>
            <img src="/wheels/countdown-bg.png" alt="" />
            <span className={"absolute bottom-[50%] translate-y-1/2"}>
                {String(hours).padStart(2, "0")}:{String(minutes).padStart(2, "0")}:
                {String(seconds).padStart(2, "0")}
            </span>
        </div>
    );
};
const ShareClient = () => {
    const [visible, setVisible] = useState(false);
    const shareUrl = process.env.NEXT_PUBLIC_SHARE_URL as string;
    const url = encodeURIComponent(`${shareUrl}`);
    const text = encodeURIComponent(`Receba 100 BRL de graça,Pix SAQUE RÁPIDO`);
    const t = useTranslations();
    const SHARE_SOURCE = [
        {
            icon: "/summary/Facebook.png",
            label: "Facebook",
            shareUrl: `https://www.facebook.com/sharer/sharer.php?u=${url}&t=${text}`,
        },
        {
            icon: "/summary/WhatsApp.png",
            label: "WhatsApp",
            shareUrl: `https://api.whatsapp.com/send?text=${text}`,
        },
        {
            icon: "/summary/Telegram.png",
            label: "Telegram",
            shareUrl: `https://t.me/share/url?url=${url}&text=${text}`,
        },
        {
            icon: "/summary/Twitter.png",
            label: "Twitter",
            shareUrl: `https://twitter.com/intent/tweet?text=${text}`,
        },
        {
            icon: "/summary/Email.png",
            label: "Email",
            shareUrl: `mailto: ?&subject=&cc=&bcc=&body=${url}%0A${text}`,
        },
    ];

    const copy = (text: string) => {
        copyText(text);
        Toast.show({ icon: "success", content: t("SummaryPage.copySuc"), maskClickable: false });
    };

    return (
        <>
            <div className={"p-[0.1389rem]"}>
                <div
                    className={
                        "rounded-[0.1111rem] bg-gradient-to-b from-[#84ea24_20%] to-[#1b781a]" +
                        " h-[0.4861rem]"
                    }
                >
                    <div className={"flex h-[100%] p-[0.0694rem]"}>
                        <div
                            className={
                                "flex-1 rounded-[0.0694rem] bg-[rgba(255,255,255,0.5)]" +
                                " flex items-center pl-[0.0694rem]"
                            }
                        >
                            <span className={""}>Compartilhe mais, saque mais rápido.</span>
                        </div>
                        <div
                            className={"flex w-[0.4167rem] items-center pl-[0.0694rem]"}
                            onClick={() => setVisible(true)}
                        >
                            <Image src={"/wheels/share.png"} alt={"share"} width={30} height={30} />
                        </div>
                    </div>
                </div>
            </div>

            <Popup
                visible={visible}
                getContainer={null}
                onMaskClick={() => {
                    setVisible(false);
                }}
                onClose={() => {
                    setVisible(false);
                }}
                showCloseButton
                bodyStyle={{ height: "2.9rem", background: "#fff" }}
            >
                <div className={"p-[0.1389rem] text-[#555555]"}>
                    <h1>1.Convide amlgos para ajudar com saques</h1>
                    <div
                        className={"mt-[0.1389rem] grid grid-cols-5 justify-center gap-[0.1389rem]"}
                    >
                        {SHARE_SOURCE.map((source, index) => {
                            return (
                                <a
                                    href={source.shareUrl}
                                    key={index}
                                    target={"_blank"}
                                    className={"flex flex-col items-center"}
                                >
                                    <Image src={source.icon} alt={"Mais"} width={70} height={70} />
                                    <p className={"mt-[0.0347rem] text-[12px] text-[#808080]"}>
                                        {source.label}
                                    </p>
                                </a>
                            );
                        })}
                    </div>

                    <div className={"mt-[0.0694rem]"}>
                        <h1 className={"text-[14px]"}>
                            Compartilhe este link de indicação com seus amigos
                        </h1>
                        <div
                            className={
                                "rounded-[3px] bg-[#f9f9f9] p-[0.0694rem] text-[#808080]" +
                                " mt-[0.0347rem] flex items-center"
                            }
                        >
                            <span className={"flex-1"}>{shareUrl}</span>
                            <span
                                id="copy"
                                className={"text-[#40a1de]"}
                                onClick={() => copy(shareUrl)}
                            >
                                {t("SummaryPage.Cópia")}
                            </span>
                        </div>
                    </div>

                    <div className={"mt-[0.0694rem]"}>
                        <h1>2.Enviar convite para jogador aleatório ajudar</h1>

                        <div
                            className={
                                "grid grid-cols-2 gap-[0.1389rem] text-[0.12rem] text-[#fff]" +
                                " mt-[0.0694rem]"
                            }
                        >
                            <Link
                                href={"#"}
                                className={
                                    "flex items-center rounded-[0.0694rem] bg-[#10cb8c]" +
                                    " p-[0.0694rem] text-[#fff]"
                                }
                            >
                                <div className={"flex-1"}>
                                    <p>Enviar Mensagem </p>
                                    <p>no WhatsAPP</p>
                                </div>
                                <Image
                                    src={"/summary/WhatsApp-nobg.png"}
                                    alt={"whatsApp"}
                                    width={40}
                                    height={40}
                                />
                            </Link>
                            <Link
                                href={"sms:10086?body=message_body"}
                                className={
                                    "flex items-center rounded-[10px] bg-[#35b2fe]" +
                                    " p-[0.0694rem] text-[#fff]"
                                }
                            >
                                <div className={"flex-1"}>
                                    <p>Enviar Mensagem </p>
                                    <p>SMS</p>
                                </div>
                                <Image
                                    src={"/summary/SMS.png"}
                                    alt={"whatsApp"}
                                    width={40}
                                    height={40}
                                />
                            </Link>
                        </div>
                    </div>
                </div>
            </Popup>
        </>
    );
};
const CashWheelClient = () => {
    return (
        <>
            <DrawMain />
            {/*倒计时*/}
            <CountdownClient />
            {/*分享*/}
            <ShareClient />
            <div className={styles.cashWheelClient}>
                {/*<CashMainCom />*/}
                {/*<DrawContent />*/}
                <Report />
                {/*<LotteryWheel />*/}
            </div>
        </>
    );
};

export default CashWheelClient;